<template>
	<div class="page-list">
		<Navbar />
		<div class="meeting-box" v-if="!isMobile" v-loading="tableLoading">
			<div class="meeting-tabs">
				<div class="tab-item">
					<el-button :disabled="tableLoading" :type="reqQuery.spaceType === 0 ? 'primary' : ''"
						@click="switchType(0)">团队空间</el-button>
				</div>
				<div class="tab-item">
					<el-button :disabled="tableLoading" :type="reqQuery.spaceType === 1 ? 'primary' : ''"
						@click="switchType(1)">私有空间</el-button>
				</div>
				<div class="tab-item" @click="visible = true">
					<el-button type="primary" icon="el-icon-plus" plain>创建会议室</el-button>
				</div>
				<div class="tab-item" @click="getList()">
					<el-button type="success" :disabled="tableLoading" :loading="tableLoading">刷新列表</el-button>
				</div>
				<div class="tab-item" @click="handleDialog">
					<el-button type="success">终端</el-button>
				</div>
			</div>
			<div class="meeting-list">
				<el-table border :data="tableData" align="center">
					<el-table-column prop="name" label="会议室名称"> </el-table-column>
					<el-table-column prop="createTime" label="创建时间"></el-table-column>
					<el-table-column prop="userDept" label="部门"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="handleJump(scope.row)">进入会议</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="display: flex;justify-content: flex-end;margin-top: 20px;">
					<el-pagination background :page-size.sync="reqData.pageSize" :current-page.sync="reqData.page"
						layout="prev, pager, next" :total="total" @current-change="currentChange">
					</el-pagination>
				</div>

			</div>
		</div>

		<MobileList v-else />
		<img v-if="isMobile" class="mobile-add" src="../../assets/icon-add.png" @click="visible = true" />

		<!-- 创建会议室 -->
		<el-dialog center :close-on-click-modal="false" width="350px" title="创建会议室" :visible.sync="visible"
			:before-close="handleClose">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="空间类型" prop="spaceType" placeholder="请选择空间类型">
					<el-select style="width: 100%;" v-model="form.spaceType" placeholder="请选择">
						<el-option label="团队空间" :value="0"> </el-option>
						<el-option label="私有空间" :value="1"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="会议code" prop="meetingRoomCode">
					<el-input v-model="form.meetingRoomCode" placeholder="请输入会议code"></el-input>
				</el-form-item>
				<el-form-item label="会议名称" prop="meetingRoomName">
					<el-input v-model="form.meetingRoomName" placeholder="请输入会议名称"></el-input>
				</el-form-item>
				<el-form-item label="会议室密码" prop="password">
					<el-input v-model="form.password" placeholder="请输入会议室密码"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button native-type="submit" type="primary" @click="handleSure">确 定</el-button>
			</span>
		</el-dialog>



		<Terminal ref="terminal" />

	</div>
</template>

<script>
import {
	meetingList,
	createMeetingRoom
} from '@/api/index.js'
import {
	useDateFormat
} from '@/utils/tools.js'
import Terminal from '@/components/Terminal.vue'
import Navbar from '@/components/Navbar'
import MobileList from './mobile.vue'
export default {
	name: 'List',
	components: {
		Navbar,
		Terminal,
		MobileList
	},
	data() {
		return {
			tableData: [],
			reqData: {
				page: 1,
				pageSize: 10,
			},
			reqQuery: {
				spaceType: 0,
				meetingType: ''
			},
			total: 0,
			form: {
				meetingRoomCode: '',
				meetingRoomName: '',
				spaceType: 0,
				password: ''
			},
			rules: {
				meetingRoomCode: [{
					required: false,
					message: '会议code不能为空',
					trigger: ['blur', 'change']
				}],
				meetingRoomName: [{
					required: true,
					message: '会议名称不能为空',
					trigger: ['blur', 'change']
				}],
				spaceType: [{
					required: true,
					message: '请选择空间类型',
					trigger: ['blur', 'change']
				}]
			},
			visible: false,
			tableLoading: false,
			statusEnum: {
				'NEW': {
					name: '离线',
					type: 'info',
				},
				'RUNNING': {
					name: '在线',
					type: 'success'
				},
				'CLOSE': {
					name: '离线',
					type: 'info',
				}
			}
		}
	},
	mounted() {
		if (this.$route.query.type == 'terminal' || localStorage.getItem('type') == 'terminal') {
			localStorage.setItem('type', 'terminal')
			this.$refs.terminal.showClose = false
			this.$refs.terminal.open()
		} else {
			this.getList()
		}
	},
	methods: {
		// 查询会议类别
		getList() {
			let data = {
				...this.reqData,
				query: this.reqQuery,
			}
			this.tableLoading = true
			meetingList(data).then(res => {
				let list = res.data.records
				list.forEach(item => {
					item.createTime = useDateFormat(item.createTime)
				})
				this.tableData = list
				this.total = res.data.total
			}).finally(res => {
				this.tableLoading = false
			}).catch(e => {
				console.log(e);
			})
		},
		currentChange(e) {
			this.getList()
		},
		// 切换会议类型
		switchType(type) {
			this.form.spaceType = type
			this.reqQuery.spaceType = type
			this.reqData.page = 1
			this.getList()
		},
		// 关闭创建窗口
		handleClose() {
			this.visible = false
		},
		// 确认创建
		handleSure() {
			this.$refs.form.validate((val) => {
				val && createMeetingRoom(this.form)
					.then(res => {
						this.getList()
					})
					.catch(err => {
						this.$message(err.msg)
					}).finally(res => {
						this.visible = false
					})
			})
		},
		// 进入会议室
		handleJump(item) {
			this.$router.push({
				path: '/room',
				query: {
					code: item.code,
					spaceType: item.spaceType,
					sessionId: item.sessionId
				}
			})
		},
		// 显示终端概况
		handleDialog() {
			this.$refs.terminal.open()
		}
	}
}
</script>

<style lang="scss" scoped>
.page-list {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.meeting-box {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	padding: 20px;

	.meeting-tabs {
		display: flex;
		flex: 25%;
	}

	.tab-item {
		text-align: center;
		margin-bottom: 20px;
		margin-right: 20px;
	}

	.meeting-list {
		flex: 75%;
	}
}

.mobile-add {
	position: fixed;
	height: 40px;
	width: 40px;
	right: 15px;
	bottom: 50px;
}

/*定义竖屏 css*/
@media screen and (orientation:portrait) {
	.meeting-box {
		display: none;
	}

	.mobile-box {
		display: block;
	}
}

.dialog-list {
	display: flex;
	flex-wrap: wrap;
}
</style>
